<!DOCTYPE html>
<html lang="en" id="htmlRoot">

<head>
  <meta charset="UTF-8" />
  <base href="/ams/">
  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    <%- title %>
  </title>
  <style>
    #app {
      width: 100%;
      min-height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
<div id="app">
<style>
html,
body,
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

html[data-theme='dark'] .app-loading {
  background-color: #2c344a;
}

html[data-theme='dark'] .app-loading .app-loading-title {
  color: #fff;
}

.app-loading {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f4f7f9;
}

.app-loading .app-loading-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  transform: translate3d(-50%, -50%, 0);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.app-loading .app-loading-tip {
  margin-top: 30px;
  color: #ccc;
}

.app-loading .app-loading-title {
  display: flex;
  margin-top: 30px;
  font-size: 30px;
  color: #000;
  justify-content: center;
  align-items: center;
}

.app-loading .app-loading-logo {
  display: block;
  width: 90px;
  margin: 0 auto;
  margin-bottom: 20px;
}

#loading {
  background-color: transparent;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 60px;
  top: 0px;
}

#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}

#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 45px;
  width: 45px;
  margin-top: -30px;
  margin-left: -22.5px;
  -webkit-animation: loading-center-absolute 1s infinite;
  animation: loading-center-absolute 1s infinite;

}

.object {
  width: 15px;
  height: 15px;
  background-color: #eca47a;
  float: left;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.object:nth-child(2n+0) {
  margin-right: 0px;

}

#object_one {
  -webkit-animation: object_one 1s infinite;
  animation: object_one 1s infinite;
}

#object_two {
  -webkit-animation: object_two 1s infinite;
  animation: object_two 1s infinite;
}

#object_three {
  -webkit-animation: object_three 1s infinite;
  animation: object_three 1s infinite;
}

#object_four {
  -webkit-animation: object_four 1s infinite;
  animation: object_four 1s infinite;
}

@-webkit-keyframes loading-center-absolute {
  100% {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@keyframes loading-center-absolute {
  100% {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes object_one {
  50% {
    -ms-transform: translate(15px, 15px);
    -webkit-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
}

@keyframes object_one {
  50% {
    -ms-transform: translate(15px, 15px);
    -webkit-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
}

@-webkit-keyframes object_two {
  50% {
    -ms-transform: translate(-15px, 15px);
    -webkit-transform: translate(-15px, 15px);
    transform: translate(-15px, 15px);
  }
}

@keyframes object_two {
  50% {
    -ms-transform: translate(-15px, 15px);
    -webkit-transform: translate(-15px, 15px);
    transform: translate(-15px, 15px);
  }
}

@-webkit-keyframes object_three {
  50% {
    -ms-transform: translate(15px, -15px);
    -webkit-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
  }
}

@keyframes object_three {
  50% {
    -ms-transform: translate(15px, -15px);
    -webkit-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
  }
}

@-webkit-keyframes object_four {
  50% {
    -ms-transform: translate(-15px, -15px);
    -webkit-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px);
  }
}

@keyframes object_four {
  50% {
    -ms-transform: translate(-15px, -15px);
    -webkit-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px);
  }
}
  </style>    
  <div class="app-loading">
    <div class="app-loading-wrap">
      <img src="/logo.svg" class="app-loading-logo" alt="Logo" />      
      <div id="loading">
        <div id="loading-center">
          <div id="loading-center-absolute">
            <div class="object" id="object_one"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_four"></div>
          </div>
        </div>
      </div>
      <div class="app-loading-tip">
        Loading ...
      </div>
      <div class="app-loading-title">
        <%- title %>
      </div>
    </div>
  </div>
</div>
<script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>

</html>